<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/webInterface.css">
<link rel="stylesheet" href="css/bs_callout.css">
<link rel="stylesheet" href="css/pace.css">
<link rel="stylesheet" href="//cdn.bootcss.com/smokejs/3.0.1/css/smoke.css">
<link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/tables.css">
<!-- vue.js文件 -->
<script src="//cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.14/vue.min.js"></script>
<script src="//cdn.bootcss.com/smokejs/3.0.1/js/smoke.js"></script>
<script src="//cdn.bootcss.com/Chart.js/1.0.2/Chart.js"></script>
<!-- 表格扩展js文件 -->
<script src="//cdn.bootcss.com/datatables/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="js/monitor.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/config.js"></script>
<script src="js/tips.js"></script>
<script src="js/pace.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        dashboard.init();
    });
</script>
</head>

<body style="padding-top:70px">

    <div id="interface_login" class="interface">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" >VeryNginx Login</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" onsubmit="dashboard.login(this.user.value,this.password.value); return false;">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">User</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="user" placeholder="User name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="password" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Log in</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="interface_dashboard" class="interface">

        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" onclick="dashboard.switch_to_page('status')" href="#">VeryNginx</a> 
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="topnav" id="topnav_status" class="active" >
                            <a href="#" class="init_click" onclick="dashboard.switch_to_page('status')" >状态</a>
                        </li>
                        <li class="topnav" id="topnav_config"  >
                            <a href="#" onclick="dashboard.switch_to_page('config')" >配置</a>
                        </li>
                        <li class="topnav" id="topnav_summary" >
                            <a href="#" onclick="dashboard.switch_to_page('summary')" >访问统计</a>
                        </li>
                        <li class="topnav"id="topnav_firewall" style="display:none">
                            <a href="#" onclick="dashboard.switch_to_page('firewall')" >防火墙</a>
                        </li>
                        <li class="topnav" id="topnav_about" >
                            <a href="#" onclick="dashboard.switch_to_page('about')" >关于</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="topnav" id="topnav_logout" >
                            <a href="#" onclick="dashboard.logout()" >Logout</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /.container-fluid -->
        </nav>

        <div class="page" id="page_status">
            <div class="container-fluid">
                <div>
                    <div class="status_group_title">Requests</div> 
                    <div class="status_group_title_desc"> per second</div>
                    <span class="glyphicon glyphicon-cog btn-lg pull-right" aria-hidden="true"  onclick="dashboard.open_dashboard_config()">
                    </span>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <span class="status_color_mark" style="background-color:rgba(220,220,220,1)"></span>
                        <span class="status_color_desc">all request</span>
                    </div>
                    <div class="col-sm-6">
                        <span class="status_color_mark" style="background-color:rgba(151,187,205,1)"></span>
                        <span class="status_color_desc">request with response status 200</span>
                    </div>
                </div>

                <div id="chart_request_container">
                    <canvas id="chart_request" width="1400" height="400"></canvas>
                </div>
                
                <div class="row">
                    <div class="col-md-4">
                        <div class="status_sub_group_title">TCP Connections</div>
                        <div id="chart_connection_container">
                            <canvas id="chart_connection" width="700" height="400"></canvas>
                        </div>

                        <div class="container-fluid" style="margin-top:-10px">
                            <div class="row">
                                <div class="col-sm-4">
                                    <span class="status_color_mark" style="background-color:rgba(220,220,220,1)"></span>
                                    <span class="status_color_desc">All</span>
                                </div>
                                <div class="col-sm-4">
                                    <span class="status_color_mark" style="background-color:rgba(151,187,205,1)"></span>
                                    <span class="status_color_desc">Writing</span>
                                </div>
                                <div class="col-sm-4">
                                    <span class="status_color_mark" style="background-color:rgba(151,205,187,1)"></span>
                                    <span class="status_color_desc">Reading</span>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="col-md-4">
                        <div class="status_sub_group_title">Response Time</div>
                        <div class="status_sub_group_title_desc"> (ms) </div>
                        <div id="chart_response_time_container">
                            <canvas id="chart_response_time" width="700" height="400"></canvas>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="status_sub_group_title">Network Traffic</div>
                        <div class="status_sub_group_title_desc"> (KiB/s) </div>
                        <div id="chart_traffic_container">
                            <canvas id="chart_traffic" width="700" height="400"></canvas>
                        </div>
                        
                        <div class="container-fluid" style="margin-top:-10px">
                            <div class="row">
                                <div class="col-sm-6">
                                    <span class="status_color_mark" style="background-color:rgba(220,220,220,1)"></span>
                                    <span class="status_color_desc">Out</span>
                                </div>
                                <div class="col-sm-6">
                                    <span class="status_color_mark" style="background-color:rgba(151,187,205,1)"></span>
                                    <span class="status_color_desc">In</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <!-- Modal -->
                <div class="modal fade" id="status_config_modal">
                    <div class="modal-dialog vn_modal_md">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">Status Dashboard config</h4>
                            </div>
                            <div class="modal-body" id="console_div" >

                                <form class="form-horizontal" onsubmit="return false;">
                                    <div class="row status_modal_row" >
                                        <label class="col-sm-5 text-right">Enable Animation</label>
                                        <div class="col-sm-5">
                                            <input type="checkbox" name="enable_animation">
                                        </div>
                                    </div>
                                    <div class="row status_modal_row" >
                                        <label class="col-sm-5 text-right" >Refresh Interval</label>
                                        <div class="col-sm-5">
                                            <input type="range" name="refresh_interval" value="3" min="1" max="15" oninput="dashboard.status_dashboard_update_interval_label()">
                                        </div>
                                        <div class="col-sm-2" name="refresh_interval_label">
                                            3s
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" onclick="dashboard.save_status_dashboard_config()">Save</button>
                              </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->

                
            </div>
        </div>

        <div class="page" id="page_config">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-2">
                        <div style="border-right: 1px solid #eee;margin-left:auto; margin-right:auto;">
                            <div class="leftnav leftnav_1 init_click" group="redirect" onclick="dashboard.switch_config_nav_group(this)">重定向</div>
                            <div class="leftnav_group" group="redirect">
                                <div class="leftnav leftnav_2 " config_name="redirect_scheme" onclick="dashboard.switch_to_config(this)">协议重定向</div>
                                <div class="leftnav leftnav_2" config_name="redirect_uri" onclick="dashboard.switch_to_config(this)">URI重定向</div>
                            </div>
                            <div class="leftnav leftnav_1" group="filter" onclick="dashboard.switch_config_nav_group(this)">请求过滤</div>
                            <div class="leftnav_group" group="filter">
                                <div class="leftnav leftnav_2" config_name="filter_ipwhitelist" onclick="dashboard.switch_to_config(this)">IP白名单</div>
                                <div class="leftnav leftnav_2" config_name="filter_ip" onclick="dashboard.switch_to_config(this)">IP过滤</div>
                                <div class="leftnav leftnav_2" config_name="filter_useragent" onclick="dashboard.switch_to_config(this)">UserAgent过滤</div>
                                <div class="leftnav leftnav_2" config_name="filter_uri" onclick="dashboard.switch_to_config(this)">URI过滤</div>
                                <div class="leftnav leftnav_2" config_name="filter_arg" onclick="dashboard.switch_to_config(this)">参数过滤</div>
                            </div>
                            <div class="leftnav leftnav_1" group="summary" onclick="dashboard.switch_config_nav_group(this)">统计</div>
                            <div class="leftnav_group" group="summary">
                                <div class="leftnav leftnav_2" config_name="summary_request" onclick="dashboard.switch_to_config(this)">访问统计</div>
                            </div>
                            <div class="leftnav leftnav_1" group="system" onclick="dashboard.switch_config_nav_group(this)">系统</div>
                            <div class="leftnav_group" group="system">
                                <div class="leftnav leftnav_2" config_name="system_admin" onclick="dashboard.switch_to_config(this)">用户</div>
                                <div class="leftnav leftnav_2" config_name="system_allconfig" onclick="dashboard.switch_to_config(this)">全部配置</div>
                            </div>
                        </div>
                    </div>  
                    <div class="col-sm-8" id="verynginx_config">
                        <div class="config_container" id="config_redirect_scheme">
                            <div class="config_title">
                                协议重定向
                            </div>
                            <input type="checkbox" id="checkbox" v-model="redirect_scheme_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_redirect_scheme_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>URI</td>
                                        <td>协议</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="rule in redirect_scheme_rule">
                                        <tr>
                                            <td >{{ $index }}</td>
                                            <td >{{ rule[0] }}</td>
                                            <td >{{ rule[1] }}</td>
                                            <td class="no_break">
                                                <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('redirect_scheme_rule',{{$index}},null)">
                                                    DEL
                                                </button>
                                                <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_up('redirect_scheme_rule',{{$index}})">
                                                    UP
                                                </button>
                                                <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_down('redirect_scheme_rule',{{$index}})">
                                                    DOWN
                                                </button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>

                            
                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_redirect_scheme_form_add" 
                                  onsubmit="config.config_add( 'redirect_scheme_rule', [this.uri.value,this.scheme.value]); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">URI</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" rows="3" name="uri" placeholder="A RegEx for URI"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">访问协议</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="scheme">
                                            <option value="http">http only</option>
                                            <option value="https">https only</option>
                                            <option value="none">both http and https</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_redirect_scheme_table" test_action="config.test_match_factory('re')" test_args="[1]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">URI</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="URI not include the domain, a uri will be like /aaa/bbb/index.html" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="config_container" id="config_redirect_uri">
                            <div class="config_title">
                                URI重定向
                            </div>
                            <input type="checkbox" id="checkbox" v-model="redirect_uri_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_redirect_uri_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>URI</td>
                                        <td>替换目标</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in redirect_uri_rule">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule[0] }}</td>
                                        <td>{{ rule[1] }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('uri_redirect_rule',{{$index}},null)">
                                                DEL
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_up('uri_redirect_rule',{{$index}})">
                                                UP
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_down('uri_redirect_rule',{{$index}})">
                                                DOWN
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_redirect_uri_form_add" 
                                  onsubmit="config.config_add( 'redirect_uri_rule', [this.uri.value,this.replace.value]); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">URI</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" rows="3" name="uri" placeholder="A RegEx for URI"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">替换目标</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" name="replace" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_redirect_uri_table" test_action="config.test_match_factory('re_replace')" test_args="[1,2]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">URI</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="URI not include the domain, a uri will be like /aaa/demowillbereplace/index.html" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 config_test_sub_output">
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="config_container" id="config_filter_ipwhitelist">
                            <div class="config_title">
                                IP白名单
                            </div>
                            <input type="checkbox" id="checkbox" v-model="filter_ipwhitelist_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_filter_ipwhitelist_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>IP</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in filter_ipwhitelist_rule">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('filter_ipwhitelist_rule',{{$index}},null)">
                                                DEL
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_filter_ipwhitelist_form_add" 
                                  onsubmit="config.config_add( 'filter_ipwhitelist_rule', [this.ip.value]); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">IP</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" name="ip" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_filter_ipwhitelist_table" test_action="config.test_match_factory('equal')" test_args="[1]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">IP</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="ip address" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                            </form>

                        </div>
                        
                        <div class="config_container" id="config_filter_ip">
                            <div class="config_title">
                                IP过滤
                            </div>
                            <input type="checkbox" id="checkbox" v-model="filter_ip_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_filter_ip_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>IP</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in filter_ip_rule">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('filter_ip_rule',{{$index}},null)">
                                                DEL
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_filter_ip_form_add" 
                                  onsubmit="config.config_add( 'filter_ip_rule', [this.ip.value] ); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">IP</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" name="ip" type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_filter_ip_table" test_action="config.test_match_factory('equal')" test_args="[1]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">IP</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="ip address" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="config_container" id="config_filter_useragent">
                            <div class="config_title">
                                UserAgent过滤
                            </div>
                            <input type="checkbox" id="checkbox" v-model="filter_useragent_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_filter_useragent_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>UserAgent</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in filter_useragent_rule">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule[0] }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('filter_useragent_rule',{{$index}},null)">
                                                DEL
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_up('filter_useragent_rule',{{$index}})">
                                                UP
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_down('filter_useragent_rule',{{$index}})">
                                                DOWN
                                            </button>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_filter_ip_form_add" 
                                  onsubmit="config.config_add( 'filter_useragent_rule', [this.useragent.value] ); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">UserAgent</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" rows="3" name="useragent" placeholder="A RegEx for request UserAgent"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_filter_useragent_table" test_action="config.test_match_factory('re')" test_args="[1]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">UserAgent</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="UserAgent" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                            </form>
                        </div>
                        
                        <div class="config_container" id="config_filter_uri">
                            <div class="config_title">
                                URI过滤
                            </div>
                            <input type="checkbox" id="checkbox" v-model="filter_uri_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_filter_uri_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>URI</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in filter_uri_rule">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule[0] }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('filter_uri_rule',{{$index}},null)">
                                                DEL
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_up('filter_uri_rule',{{$index}})">
                                                UP
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_down('filter_uri_rule',{{$index}})">
                                                DOWN
                                            </button>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_filter_uri_form_add" 
                                  onsubmit="config.config_add( 'filter_uri_rule', [this.uri.value] ); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">URI</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" name="uri" type="text" placeholder="A RegEx for request uri" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_filter_uri_table" test_action="config.test_match_factory('re')" test_args="[1]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">URI</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="URI not include the domain, a uri will be like /aaa/bbb/index.html" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                            </form>
                        </div>
                        
                        <div class="config_container" id="config_filter_arg">
                            <div class="config_title">
                                参数过滤
                            </div>
                            <input type="checkbox" id="checkbox" v-model="filter_arg_enable">
                            <label>启用</label>
                            <table class="table table-bordered config_table" id="config_filter_arg_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>arg</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in filter_arg_rule">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule[0] }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('filter_arg_rule',{{$index}},null)">
                                                DEL
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_up('filter_arg_rule',{{$index}})">
                                                UP
                                            </button>
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_move_down('filter_arg_rule',{{$index}})">
                                                DOWN
                                            </button>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一条配置
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_filter_arg_form_add" 
                                  onsubmit="config.config_add( 'filter_arg_rule', [this.arg.value] ); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">ARG</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" rows="3" name="arg" placeholder="A RegEx for request arg"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>

                            <div class="config_sub_title">
                                测试规则
                            </div>
                            <hr>
                            <form class="form-horizontal config_test_container" test_rule_table="config_filter_arg_table" test_action="config.test_match_factory('re')" test_args="[1]" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">ARG</label>
                                    <div class="col-sm-10">
                                        <input class="form-control config_test_input" placeholder="Value of the arg" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10 matched config_test_output">
                                    </div>
                                </div>
                            </form>
                        </div>
                        
                        <div class="config_container" id="config_summary_request">
                            <div class="config_title">
                                访问统计
                            </div>
                            <input type="checkbox" id="checkbox" v-model="summary_request_enable">
                            <label>启用</label>
                        </div>

                        <div class="config_container" id="config_system_allconfig">
                            <div class="config_title">
                                当前全部配置
                            </div>
                            <div>
                                <pre id="config_system_all_show" v-text="all_config_json">

                                </pre>
                            </div>
                            
                            <div style="font-size:1.2em">
                                操作
                            </div>
                            <hr>
                            <p>
                              <button type="button" class="btn btn-default" onclick="config.save_config()">保存配置</button>
                              <button type="button" class="btn btn-default" onclick="config.get_config()">重新获取</button>
                            </p>
                        </div>
                        <div class="config_container" id="config_system_admin">
                            <div class="config_title">
                                用户管理
                            </div>
                            <table class="table table-bordered config_table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>user</td>
                                        <td>password</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="rule in admin">
                                        <td>{{ $index }}</td>
                                        <td>{{ rule[0] }}</td>
                                        <td>{{ rule[1] }}</td>
                                        <td class="no_break">
                                            <button type="button" class="btn btn-default btn-xs" onclick="config.config_mod('admin',{{$index}},null)">
                                                DEL
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="config_sub_title">
                                添加一个用户
                            </div>
                            <hr>
                            <form class="form-horizontal" name="config_admin_form_add" 
                                  onsubmit="config.config_add( 'admin', [this.user.value, this.password.value] ); return false;" >

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">User</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" name="user" type="text" placeholder="user name" >
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Password</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" name="password" type="text" placeholder="password" >
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default" >添加</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="col-sm-2" id="verynginx_tips">
                        <template v-for="tip in tips">
                            <div class="tips_container"  onclick="tips.toggle(this)">
                                <div class="tips_tips">
                                    {{tip.tips}} 
                                </div>
                                
                                <div class="tips_content collapse">
                                    <template  v-if="(typeof tip.content == 'string')">
                                        {{ tip.content }}
                                    </template>
                                    
                                    <template  v-if="(typeof tip.content == 'object')">
                                        <ul>
                                            <template  v-for="row in tip.content ">
                                                <li> {{row}} </li>
                                            </template>
                                        </ul>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>  
            </div>
        </div>

        <div class="page" id="page_summary">
            <div class="summary_url_table">
                <!-- Single button -->
                <div>
                    <div id="summary_title">
                        Request Summary
                    </div>

                    <div id="summary_action_bar">
                        <div style="display:inline-block;">
                            <div id="summary_filter_label" >Filter</div>
                            <input id="summary_filter_input" type="text" class="form-control" oninput="data_stat.search(this.value)" placeholder="try input a URI...">
                        </div>

                        <div class="pull-right" >
                            <div id="summary_control_label" >Data Type</div>
                            
                            <div class="btn-group">
                                <div class="btn-group">
                                    <button type="button" style="width:120px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="def_btn">All<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                        <li ><a href="#" title="all request summary" id="summary_data_all" onclick="data_stat.tab_switch(this)">All</a></li>
                                        <li ><a href="#" title="The temporary summary will be clead every minute" id="summary_data_temporary" onclick="data_stat.tab_switch(this)">Temporary</a></li>
                                    </ul>
                                </div>
                                <button type="button" class="btn btn-default" id="summary_data_refresh" onclick="data_stat.get_data()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
               
                <div id="summary_type_note">
                    <span>Notice: The temporary summary will be clead every minute.</span>
                </div>
                
                <table class="table table-hover table-bordered display" id="url_table">
                    <thead>
                        <tr>
                            <th>index</th>
                            <th>uri</th>
                            <th>count</th>
                            <th>size(Bytes)</th>
                            <th>avg size(Bytes)</th>
                            <th>200 rate</th>
                            <th>time(s)</th>
                            <th>avg time(s)</th>
                        </tr>
                    </thead>
                    <tbody id="url_details">
                    </tbody>
                </table>
            </div>
        </div>
        <div class="page" id="page_firewall">
            防火墙
        </div>
        
        <div class="page" id="page_about">
            <div style="padding-top:100px">
                <h1 class="text-center" id="about_title">Very Nginx</h1>
                <h3 class="text-center" id="about_sub_title">A very powerful and friendly nginx</h3>
                <div id="about_sub_btn_container">
                    <a id="about_sub_btn" target="_blank" href="https://github.com/alexazhou/VeryNginx">
                        Look in Github
                    </a>
                </div>
            </div>
        </div>
    
    </div>

    <!-- Modal -->
    <div class="modal fade" id="console_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">...</h4>
                </div>
                <div class="modal-body" id="console_div" >
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</body>
<script src="js/data_stat.js"></script>
</html>
